<template>
	<div class="related-room-outer-wrap">
		<a href="javascript:;" class="related-room-navigation" :class="{'active':activeFlag}" ref="navigationa" @click="closeNavigation">房间导航</a>
		<div class="related-room-wrap" :class="{'down': upDownFlag,'shrink': shrinkFlag}" ref="wrap" :style="{transformOrigin: `100% ${transformRight}px`}">
				<a  href="javascript:;" class="related-icon-close" @click="handleClose"></a>
				<div class="related-room-inner-wrap" v-overscroll-bahavior>
					<ul>
						<li v-for="item in relatedRoomList" :key="item.id" class="related-room-li">
							<router-link :to="{name:'room',params:{eng_name: engName,roomid: item.private_room }}">
								<img :src="`${roompara.show_url}${item.icon}`" alt="房间图" class="related-room-img" ref="relatedImg">
								<div class="related-room-desc">{{item.room_name}}</div>
							</router-link>
						</li>
					</ul>
				</div>
		<!-- 		<div class="related-bottom-tips" @click="spread" v-if="relatedRoomList.length > 1">
					<p>房间导航</p>
					<i class="related-icon-pull-up"></i>
				</div> -->
			</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		name: 'RelatedRoom',
		props: {
			relatedRoomList : {
				type: Array,
				default () {
					return []
				}
			},
			engName: {
				type: String,
				required: true
			}
		},
		data () {
			return {
				upDownFlag: true,
				shrinkFlag: false,
				activeFlag: false,
				transformRight: 0
			}
		},
		computed:{
			...mapGetters([
				'roompara'
			])
		},
		methods: {
			spread () {
				this.upDownFlag = !this.upDownFlag
			},
			handleClose () {
				this.shrinkFlag = true
			},
			wrapTransEnd () {
				if(this.shrinkFlag){
					this.activeFlag = true
				}
			},
			navigationaTransEnd () {
				if(!this.activeFlag){
					this.shrinkFlag = false
				}
			},
			closeNavigation() {
				if(!this.$parent.giftShow){
					this.activeFlag = false
				}
			},
			shrink(val) {
				if(val && !this.shrinkFlag){
					this.shrinkFlag = true
				}
			}
		},
		mounted () {
			const defaultBg = !window.is_official ? require('@/assets/images/default/room-icon-default.jpg') : require('@/assets/images/deticateIp/room-default-over.jpg')
			this.$refs.relatedImg.length && this.$refs.relatedImg.map((item) => {
				item.onerror = function(){
					this.onerror = null
					this.src = defaultBg
				}
			})
			this.$refs.wrap.addEventListener('transitionend', this.wrapTransEnd)
			this.$refs.navigationa.addEventListener('transitionend', this.navigationaTransEnd)
			this.transformRight = -( this.$refs.wrap.getBoundingClientRect().top - this.$refs.navigationa.getBoundingClientRect().top )
		},
		beforeDestroy(){
			this.$refs.wrap.removeEventListener('transitionend', this.wrapTransEnd)
			this.$refs.navigationa.removeEventListener('transitionend', this.navigationaTransEnd)
		},
		watch: {
			'$parent.emojiShow':function(val) {
				this.shrink(val)
			},
			'$parent.giftShow':function(val) {
				this.shrink(val)
			}
		}
	}
</script>

<style scoped lang="scss">
	.related-room-navigation{
		position: absolute;
		top: 18.75rem;
		right: 0;
		padding: 0 1.5rem;
		line-height: 2.875rem;
		text-align: center;
		background-color: rgba(0,0,0,.55);
		border-radius:1.5rem 0 0 1.5rem;
		font-size: 1rem;
		color: #fff;
		box-shadow: 0px 0px 5px rgba(0,0,0,.3);
		transition: all .2s;
		opacity: 0;
		transform: translateX(100%);
		&.active{
			opacity: 1;
			transform: translateX(0);
		}
	}
	.related-room-wrap{
		position: absolute;
		width: 22.1875rem;
		left: 0;
		right: 0;
		bottom: 3.5rem;
		margin: 0 auto;
		background-color: rgba(0,0,0,.5);
		box-shadow: 0px 0px  3px 0px rgba(0,0,0,.35);
		border-radius: 0.375rem;
		font-size: 0.875rem;
		color: #fff;
		z-index: 20;
		transition: transform .25s,opacity .25s;
		transform-origin: right -100px;
		&.shrink{
			transform: scale(0);
			opacity: 0;
		}
		.related-icon-close{
			position: absolute;
			right: 0.3125rem;
			top: 0.3125rem;
			width: 1.2rem;
			height: 1.2rem;
			background: #fff url(../../assets/images/private-chat-close-icon.png) no-repeat center;
			background-size: .6rem .6rem;
			border-radius: 50%;
			z-index: 1;
		}
	}
	.related-room-wrap.down{
		.related-room-inner-wrap{
			max-height: 14.375rem;
			overflow-y: auto;
		}
		.related-icon-pull-up{
			transform: rotate(0deg);
		}
	}
	.related-room-inner-wrap{
		max-height: 1.75rem;
		padding: 0.625rem 1.75rem;
		padding-right: 2.5rem;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		transition: max-height .25s;
	}
	.related-room-li{
		line-height: 1.75rem;
		margin-bottom: 0.75rem;
		a{
			display: block;
			overflow: hidden;
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
	.related-room-img{
		float: left;
		width: 3.875rem;
		height: 1.75rem;
	}
	.related-room-desc{
		padding-left: 1.125rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 11.25rem;
	}
	.related-bottom-tips{
		position: absolute;
		right: 0.5rem;
		bottom: 0;
		text-align: center;
		.related-icon-pull-up{
			display: inline-block;
			width: 0.5rem;
			height: 0.5625rem;
			background: url(../../assets/images/relatedroom/related-icon-pull-up.png) no-repeat center;
			background-size: contain;
			transform: rotate(180deg);
			transition: transform .25s;
			vertical-align: top;
		}
	}
</style>
